import React, { useState } from 'react';
import logo from './img/logo.png';
import { useNavigate, useLocation } from 'react-router-dom';
import LoginPopup from '../LoginPopup/LoginPopup';
import { FaFile, FaImage, FaFolderOpen, FaSearch, FaExchangeAlt } from 'react-icons/fa';
import { FaMobileAlt, FaDesktop, FaHashtag, FaFileAlt } from 'react-icons/fa';

import { faWeixin } from '@fortawesome/free-brands-svg-icons';
import './nav.css'
import { Button, Modal, Tooltip } from 'antd';
import { library } from '@fortawesome/fontawesome-svg-core';
import Invite from '../../com/Invite/Invite';
import qrcode from '../../../public/loginImg/codeqq.jpg'
library.add(faWeixin); // 注册微信图标

type MenuItem = {
  icon: React.ReactNode;
  label: string;
  path?: string;
  className?: string;
  onClick?: () => void; // 新增点击事件
};

interface NavProps {
  showDesignModal: boolean;
  setShowDesignModal: React.Dispatch<React.SetStateAction<boolean>>;
  onCloseDesignModal: () => void;
}


const Nav: React.FC<NavProps> = ({ showDesignModal, setShowDesignModal, onCloseDesignModal }) => {
  const navigate = useNavigate();
  const location = useLocation(); // 获取当前路由信息
  const [showLogin, setShowLogin] = useState(false);
  const [targetPath, setTargetPath] = useState<string | null>(null);
  const [showLogoPopup, setShowLogoPopup] = useState(false);
  const [showInvite, setShowInvite] = useState(false)


  // 路由跳转逻辑（处理有 path 的菜单项）
  const handleMenuItemClick = (path?: string) => {
    if (path) {

      const needLoginPaths = ['/profile'];
      const requiresLogin = needLoginPaths.includes(path);
      const isUserLoggedIn = !!localStorage.getItem('token');

      if (requiresLogin && !isUserLoggedIn) {
        setTargetPath(path);
        setShowLogin(true);
      } else {
        navigate(path);
      }
    }
  };

  // 创建设计弹框逻辑（单独处理）
  const handleDesignClick = () => {
    setShowDesignModal(true);
  };
  // 点击出现邀请成员，出现弹框
  const handleInviteClick = () => {

    setShowInvite(true)
  }
  // 跳转低代码区，制作海报 图片
  const lowcode = () => {
    navigate('/lowcode')
  }
  // 点击稿定APP，跳转链接
  const handleAppClick = () => {
    window.open('https://www.gaoding.com/download?channelCode=web_navi')
  }

  //跳转到创建设计页面
  const topicture = () => {
    navigate('/Createdesign')
  }


  //主菜单
  const menuItems: MenuItem[] = [
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.592 0L21.75 12M4.5 9.75v10.125c0.621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.5c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
        </svg>
      ),
      label: '创作',
      path: '/'
    },
    {
      icon: (
        <svg t="1748926669906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23190" className="w-6 h-6"><path d="M512 65C265.146 65 65 265.146 65 512c0 246.853 200.147 447 447 447 246.854 0 447-200.147 447-447C959 265.146 758.854 65 512 65zM512 94.8c230.048 0 417.199 187.152 417.199 417.2 0 104.822-38.951 200.671-103.018 274.034-1.603-4.685-3.203-9.385-5.021-13.968-31.08-78.547-94.129-143.471-173.474-178.365-0.218-0.087-0.421-0.159-0.626-0.262 31.647-33.38 51.189-78.367 51.189-128.002 0-102.875-83.377-186.25-186.25-186.25-102.874 0-186.25 83.375-186.25 186.25 0 49.648 19.555 94.652 51.218 128.046-0.394 0.175-0.742 0.291-1.15 0.466-78.851 34.646-141.898 99.57-172.98 178.117-1.818 4.598-3.418 9.283-5.019 13.968C133.753 712.671 94.8 616.822 94.8 512 94.8 281.952 281.952 94.8 512 94.8zM616.314 581.697c-9.313 8.366-19.541 15.729-30.657 21.697-21.975 11.77-47.03 18.491-73.657 18.491-26.628 0-51.714-6.722-73.686-18.507-11.117-5.968-21.316-13.315-30.629-21.682-31.909-28.664-52.135-70.091-52.135-116.26 0-86.272 70.178-156.45 156.45-156.45s156.449 70.177 156.449 156.45C668.449 511.606 648.225 553.033 616.314 581.697zM221.101 810.653c1.062-3.885 2.095-7.813 3.302-11.494 26.963-82.721 92.5-151.082 176.909-184.185 30.965 22.96 69.174 36.714 110.688 36.714 41.5 0 79.693-13.735 110.644-36.686 83.799 32.349 149.858 100.999 176.968 184.156 1.193 3.666 2.226 7.594 3.288 11.494C727.687 883.933 625.06 929.199 512 929.199S296.313 883.933 221.101 810.653z" fill="#2c2c2c" p-id="23191"></path></svg>
      ),
      label: '我的',
      path: '/profile'
    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
      ),
      label: '创建设计',
      onClick: handleDesignClick, // 关键：绑定弹框显示事件

    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
        </svg>
      ),
      label: '模板',
      path: '/masterplate'
    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H12a2.25 2.25 0 00-2.25 2.25v6.375l-6.159 3.23a1.125 1.125 0 000 1.96l12 6.375a1.125 1.125 0 001.732 0l12-6.375a1.125 1.125 0 000-1.96l-6.159-3.23V8.25A2.25 2.25 0 0012 6h1.5m-1.5 0V5a1.5 1.5 0 00-1.5-1.5h-6A1.5 1.5 0 003 5v1h1.5M13.5 6a1.5 1.5 0 011.5 1.5v7.5a1.5 1.5 0 01-1.5 1.5h-6a1.5 1.5 0 01-1.5-1.5V7.5a1.5 1.5 0 011.5-1.5h6z" />
        </svg>
      ),
      label: '素材',
      path: '/material'
    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-3.75m0 0l-6.158 3.234a2.25 2.25 0 000 3.932l12.316 6.47a2.25 2.25 0 002.242 0l6.158-3.233M12 14.25V6.75m0 0l6.158-3.234a2.25 2.25 0 002.242 0l6.158 3.233m-12.316 7.466l-6.158 3.234a2.25 2.25 0 01-2.242 0l-6.158-3.233a2.25 2.25 0 010-3.932l12.316-6.47a2.25 2.25 0 012.242 0l6.158 3.233" />
        </svg>
      ),
      label: 'AI工具',
      path: '/AITool'
    },

    {
      icon: (
        <svg t="1748924951523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20373" className='w-6 h-6'><path d="M418.1504 891.3408a20.46976 20.46976 0 0 1-14.9504-34.4576l90.8288-97.024c3.8912-4.1472 9.2672-6.5024 14.9504-6.5024 202.0864 0 366.4896-125.4912 366.4896-279.7056s-164.4032-279.7056-366.4896-279.7056-366.4896 125.44-366.4896 279.7056c0 112.5376 87.9104 213.6576 223.9488 257.6896 10.752 3.4816 16.64 15.0016 13.1584 25.8048a20.4544 20.4544 0 0 1-25.8048 13.1584c-153.2416-49.5616-252.3136-166.0416-252.3136-296.6528 0-176.8448 182.784-320.6656 407.4496-320.6656s407.4496 143.872 407.4496 320.6656c0 174.4896-177.92 316.8256-398.4896 320.6144l-84.8384 90.624a20.3264 20.3264 0 0 1-14.8992 6.4512z" fill="#2c2c2c" p-id="20374"></path></svg>
      ),
      label: 'AI对话',
      path: '/AIChat'
    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 01-5.337-1.137A60.07 60.07 0 010 12.75c0-5.225 2.25-9.86 6.366-12.278a60.07 60.07 0 0111.232 0C18.75 2.89 21 7.535 21 12.75c0 5.225-2.25 9.86-6.366 12.278a60.07 60.07 0 01-11.232 0zm15 0a58.172 58.172 0 00-12.432 0c-4.591 2.386-6.366 6.97-6.366 12.278 0 5.225 2.25 9.86 6.366 12.278a58.172 58.172 0 0012.432 0c4.591-2.386 6.366-6.97 6.366-12.278 0-5.225-2.25-9.86-6.366-12.278z" />
        </svg>
      ),
      label: '精选模版',
      path: '/Selected_templates'
    },
    {
      icon: (
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 01-5.337-1.137A60.07 60.07 0 010 12.75c0-5.225 2.25-9.86 6.366-12.278a60.07 60.07 0 0111.232 0C18.75 2.89 21 7.535 21 12.75c0 5.225-2.25 9.86-6.366 12.278a60.07 60.07 0 01-11.232 0zm15 0a58.172 58.172 0 00-12.432 0c-4.591 2.386-6.366 6.97-6.366 12.278 0 5.225 2.25 9.86 6.366 12.278a58.172 58.172 0 0012.432 0c4.591-2.386 6.366-6.97 6.366-12.278 0-5.225-2.25-9.86-6.366-12.278z" />
        </svg>
      ),
      label: '素材',
      path: '/Source_material'
    },
    {
      icon: (
        <svg t="1748924872298" class="icon" viewBox="0 0 1038 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14807" className="w-6 h-6"><path d="M703.098592 508.105915L509.115493 314.122817 703.098592 120.139718l193.838873 193.983099zM549.787042 314.122817L703.098592 467.290141l153.167323-153.167324-153.167323-153.167324zM822.084507 855.977465H541.998873V576.901408H822.084507z m-251.240563-28.845071H793.239437V605.746479H570.843944zM461.521127 855.977465H181.435493V576.901408H461.521127z m-251.240564-28.845071H432.676056V605.746479H210.280563zM461.521127 495.414085H181.435493V216.338028H461.521127z m-251.240564-28.845071H432.676056V245.183099H210.280563z" fill="" p-id="14808"></path></svg>
      ),
      label: '工作台',
      path: '/workbenches'
    },



  ];




  //底部菜单项
  const bottomMenuItems: (MenuItem & { tooltip?: React.ReactNode })[] = [
    {
      icon: (
        <svg t="1748924814973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13781" className="w-6 h-6"><path d="M405.333333 597.333333a362.666667 362.666667 0 0 1 361.856 338.56A42.666667 42.666667 0 0 1 724.650667 981.333333H43.349333a42.666667 42.666667 0 0 1-42.538666-45.44A362.666667 362.666667 0 0 1 362.666667 597.333333z m0 85.333334h-42.666666a277.504 277.504 0 0 0-269.269334 210.688L92.757333 896h582.442667l-0.597333-2.645333a277.546667 277.546667 0 0 0-259.328-210.517334L405.333333 682.666667z m469.333334-341.333334a21.333333 21.333333 0 0 1 21.333333 21.333334V469.333333h106.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H896v106.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V554.666667h-106.666667a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H810.666667V362.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667zM384 42.666667a256 256 0 1 1 0 512A256 256 0 0 1 384 42.666667z m0 85.333333a170.666667 170.666667 0 1 0 0 341.333333 170.666667 170.666667 0 0 0 0-341.333333z" fill="#000000" opacity=".65" p-id="13782"></path></svg>
      ),
      label: '邀请成员',
      onClick: handleInviteClick
    },
    {
      icon: (
        <svg t="1748924699239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4124" className="w-6 h-6"><path d="M798.723234 174.782745c0-60.576657-49.106418-109.683075-109.683075-109.683075l-354.708628 0c-60.576657 0-109.683075 49.106418-109.683075 109.683075l0 673.980161c0 60.576657 49.106418 109.683075 109.683075 109.683075l354.708628 0c60.576657 0 109.683075-49.106418 109.683075-109.683075L798.723234 174.782745zM264.557398 237.015112l494.256894 0 0 529.049305-494.256894 0L264.557398 237.015112zM334.356091 105.008612 689.016623 105.008612c38.548968 0 69.798692 31.249725 69.798692 69.798692l0 22.298865-494.256894 0 0-22.298865C264.557398 136.25936 295.807123 105.008612 334.356091 105.008612zM689.016623 918.53704 334.356091 918.53704c-38.548968 0-69.798692-31.249725-69.798692-69.798692l0-43.788296 494.256894 0 0 43.788296C758.814292 887.287315 727.564567 918.53704 689.016623 918.53704z" fill="#272636" p-id="4125"></path><path d="M513.173732 829.943282c-16.70752 0-30.30112 13.5936-30.30112 30.30112 0 16.70752 13.5936 30.30112 30.30112 30.30112s30.299073-13.5936 30.299073-30.30112C543.472805 843.536882 529.881253 829.943282 513.173732 829.943282z" fill="#272636" p-id="4126"></path></svg>
      ),
      label: '稿定APP,随时创作',
      onClick: handleAppClick,


    },
  ]

  return (
    <div style={{ float: 'left' }} className='leftBar'>
      <nav className="fixed h-screen w-64 bg-white shadow-lg overflow-y-auto  flex-col">
        <div className="p-4 border-b">
          {/* logo */}
          <div
            className="logo-container"
            onMouseEnter={() => setShowLogoPopup(true)}
            onMouseLeave={() => setShowLogoPopup(false)}
          >
            <img src={logo} alt="Logo" className="h-10 mx-auto" style={{ width: '200px', height: '70px' }} />

            {showLogoPopup && (
              <Tooltip placement="leftTop">
                <div className="logo-popup">
                  <div className="popup-arrow"></div>
                  <p>你可以通过以下方式收藏稿定网址，再也不担心找不到啦~</p>
                  <div className="popup-content">
                    <p>1、按「Ctrl+D」收藏本站或拖动LOGO到书签栏</p>
                    <p>2、点击创建快捷方式→</p>
                  </div>
                </div>
              </Tooltip>

            )}
          </div>

        </div>
        {/* 主菜单区域 */}
        <div className="nav-content flex-grow">
          {menuItems.map((item, index) => {
            const isActive = item.path && location.pathname === item.path; // 仅对有 path 的项判断激活状态
            return (
              <div
                key={index}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 hover:bg-gray-100 ${item.className === 'beta-tag' ? 'relative' : ''}`}
                // 区分处理点击事件：有 onClick 则触发弹框，否则处理路由
                onClick={() => item.onClick ? item.onClick() : handleMenuItemClick(item.path)}
                role="button"
                tabIndex={0}
              >
                <button className={`Navi ${isActive ? 'active' : ''}`}>
                  <div style={{ width: '25px', height: '25px', float: 'left', marginLeft: "10px", marginTop: "7px" }}>
                    {item.icon}
                  </div>
                  <span style={{ float: 'left', marginLeft: "10px" }}>{item.label}</span>
                </button>
              </div>
            );
          })}

          {/* 登录弹窗 */}
          {showLogin && (
            <Modal open={showLogin} onCancel={() => setShowLogin(false)} footer={null} centered width={800}>
              <LoginPopup onLoginSuccess={() => { setShowLogin(false); targetPath && navigate(targetPath); }} />
            </Modal>
          )}

          {/* 创建设计弹框（仅在 showDesignModal 为 true 时显示） */}
          <Modal
            open={showDesignModal}
            onCancel={onCloseDesignModal}
            footer={null}
            centered
            className="design-modal" // 自定义样式类名
          >
            <div className="app">
              {/* 左侧边栏 (保持不变) */}
              <div className="sidebar">
                <h1 className="title">创建设计</h1>
                <div className="button" >
                  <FaFile />
                  <span>新建画布</span>
                </div>
                <div className="button" onClick={topicture}>
                  <FaImage />
                  <span>导入图片</span>
                </div>
                <div className="button">
                  <FaFolderOpen />
                  <span>打开本地</span>
                  <span className="psd">PSD</span>
                </div>
              </div>

              {/* 右侧内容区 (保持不变) */}
              <div className="mainContent">
                {/* 搜索栏 (保持不变) */}
                <div className="searchBar">
                  <FaSearch />
                  <input type="text" placeholder="搜索全部尺寸" />
                </div>

                {/* 自定义尺寸区域 (保持不变) */}
                <div className="customSize">
                  <h3>自定义尺寸</h3>
                  <div className="sizeInput">
                    <input type="number" placeholder="宽" />
                    <input type="number" placeholder="高" />
                    <button className="exchange">
                      <FaExchangeAlt />
                    </button>
                    <span>px</span>
                    <button className="create">创建</button>
                  </div>
                </div>

                {/* 我的区域 (保持不变) */}
                <div className="mySection">
                  <h3>我的</h3>
                  <div className="empty">暂无内容</div>
                </div>

                {/* 推荐区域 (保持不变) */}
                <div className="recommend">
                  <h3>推荐</h3>
                  <div className="cardGrid">
                    {/* 手机海报卡片 (保持不变) */}
                    <div className="card" onClick={lowcode}>
                      <div className="icon"><FaMobileAlt /></div>
                      <div className="info">
                        <h4>手机海报</h4>
                        <p>1242 × 2208 px</p>
                      </div>
                    </div>

                    {/* 横版海报卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaDesktop /></div>
                      <div className="info">
                        <h4>横版海报</h4>
                        <p>1800 × 1000 px</p>
                      </div>
                    </div>

                    {/* 小红书配图卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>小红书配图</h4>
                        <p>1242 × 1656 px</p>
                      </div>
                    </div>

                    {/* 公众号首图卡片 (修改图标导入) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>公众号首图</h4>
                        <p>1800 × 766 px</p>
                      </div>
                    </div>

                    {/* 公众号次图卡片 (修改图标导入) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>公众号次图</h4>
                        <p>1000 × 1000 px</p>
                      </div>
                    </div>

                    {/* 文章长图卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaFileAlt /></div>
                      <div className="info">
                        <h4>文章长图</h4>
                        <p>1000 × 1500 px</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Modal>
        </div>

        {/* 底部菜单区域 */}
        <div className="border-t mt-auto">
          {bottomMenuItems.map((item, index) => {
            const isActive = item.path && location.pathname === item.path;
            const menuContent = (
              <div
                key={`bottom-${index}`}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 hover:bg-gray-100 ${item.className === 'beta-tag' ? 'relative' : ''}`}
                onClick={() => item.onClick ? item.onClick() : handleMenuItemClick(item.path)}
                role="button"
                tabIndex={0}
              >
                <button className={`Navi ${isActive ? 'active' : ''}`}>
                  <div style={{ width: '25px', height: '25px', float: 'left', marginLeft: "10px", marginTop: "7px" }}>
                    {item.icon}
                  </div>
                  <span style={{ float: 'left', marginLeft: "10px" }}>{item.label}</span>
                </button>
              </div>
            );

            // 特别处理带tooltip的菜单项
            if (item.label === '稿定APP,随时创作') {
              return (
                <Tooltip
                  key={`app-tooltip-${index}`}

                  title={
                    <div className="custom-tooltip">

                      <div className="app-tooltip">
                        <div className="qr-code-placeholder">
                          <img src={qrcode} alt="" style={{ width: '120px', height: '120px' }} />
                        </div>
                        <p>扫一扫下载稿定APP</p>
                        <p><span style={{ color: "#1d68ff", fontSize: '14px' }}>免费领取</span>随身作图神器</p>
                        <Button>手机/电脑端下载</Button>
                      </div>
                    </div>
                  }
                  placement="right"
                  overlayClassName="custom-tooltip"
                  zIndex={1001}
                  overlayStyle={{
                    position: 'fixed', // 确保位置正确
                    left: '220px',    // 从左侧栏右侧出现
                    top: 'auto',      // 自动计算垂直位置
                    bottom: '20px'    // 从底部向上偏移
                  }}
                >
                  {menuContent}
                </Tooltip>
              );
            }

            return menuContent;
          })}
        </div>

        {
          showInvite && (
            <Modal
              open={showInvite}
              footer={null}
              onCancel={() => setShowInvite(false)}
              width={500}
            >

              <Invite />

            </Modal>
          )
        }



      </nav>
    </div>

  );
};


export default Nav;  
